<template>
    <div class="login-container">
        <el-card class="login-card">
            <h3>登录</h3>
            <el-form ref="loginForm" :model="loginForm" label-width="100px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
  
<script>
import { login } from '@/api/login.js'
import localStroage from '@/utils/localStroage.js'
const { getStroage,
    setStroage } = localStroage;
export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            token: getStroage('token'),
        };
    },
    created() {
        if (this.token && this.token != '') {
            this.$message.success('检测到用户已登录！2秒后自动跳转！')
            setTimeout(() => {
                this.$router.push('/gantt')
            }, 1500)
        }
    },
    methods: {
        login() {
            // 在这里处理登录逻辑
            console.log('用户名：', this.loginForm.username);
            console.log('密码：', this.loginForm.password);
            // 进行登录验证等操作
            const postData = {
                ...this.loginForm
            }
            console.log(postData)

            setStroage('token', this.loginForm.username)

            // 登录成功返回用户token以及role权限标识

            // {
            //     token:"c1c0771c90074",
            //     role:"admin", // admin user
            // }

            login(postData).then(res => {
                console.log(res)
                // 登录成功跳转gantt
                // setStroage('token',res.data.token)
                this.$router.push('/gantt')
            })
            this.$router.push('/gantt')
        }
    }
};
</script>
  
<style scoped>
.login-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(180deg,#eaecf1 70%,#f0f4f7 100%);
}

.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../assets/bg.png') top center no-repeat;
}

.login-card {
    width: 480px;
    background-color: #fff;
}


</style>
  